<template>
	<view>
		<view class="flexs2 p_bot size24 text-gray">
			<view v-for="(item, index) in list" :key="index" class="flex-column" :class="fn(packageType)">

				<text>{{ item.p_price }}</text>
			</view>
		</view>
		<view class="width615 flexs">
			<view class="bg1">
				<view  :class="[ packageType==4 ? 'bg2Green' : 'bg2' ]" :style="[{ width: width + '%' }]"></view>
			</view>
			<view class="yuans flexs2">
				<image src="../../static/yuan.png"></image>
				<block v-for="(item, index) in sums" :key="index">
					<image src="../../static/yuan.png"
						v-if="width > (100 / sums) * (item + 1) || width / sums == 100 / sums || width == (100 / sums) * (item + 1)">
					</image>
					<view class="width32" v-else>
						<view></view>
					</view>
				</block>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
			StepInfo: {
				type: Object,
				default: () => {}
			},
			packageType: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				sums: 4,
				width: 0
			};
		},
		watch: {
			list(val) {
				console.log(val);
			},
			// packageType:{
			// 	handler(val) {
			// 		console.log(val);

			// 	},
			// 	immediate: true, // 在 Vue 2 中无效
			// },
			StepInfo: {
				handler(val) {
					console.log(val);
					console.log((val.Current / val.Sum).toFixed(2));
					this.width = val.Current;
					this.sums = val.Sum - 1;
					console.log('this.width', this.width);
				},
				immediate: true, // 在 Vue 2 中无效
			},
		},
		onLoad() {
			console.log();
		},
		methods: {
			fn(index) {

				if (index == 1) {
					return 'priceGay';

				} else if (index == 3) {
					console.log(index, 'priceWhite')
					return 'priceWhite';


				} else if (index == 4) {
					console.log(index, 'priceGreen')
					return 'priceGreen';
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.num {
		width: 660upx;
		margin: 0 auto;

		view {
			width: 20%;
			text-align: center;
		}
	}

	.width615 {
		width: 630upx;
		height: 32upx;
		margin: 0 auto;
		position: relative;

		.bg1 {
			width: 100%;
			height: 8px;
			background: rgb(249, 221, 228);

			.bg2 {
				border-radius: 50px;
				height: 100%;
				background: linear-gradient(90.06deg, #ff7404 0.05%, #ff604e 103.03%);
				// background: #3687F7;
			}
			.bg2Green {
				border-radius: 50px;
				height: 100%;
				background: rgb(66, 206, 43);
				// background: #3687F7;
			}
		}
        
		.yuans {
			position: absolute;
			top: 0;
			left: -2%;
			width: 104%;
			height: 100%;

			image {
				width: 22upx;
				height: 22upx;
				// border: 1upx solid;
			}

			.width32 {
				width: 32upx;
				text-align: center;
				display: flex;
				justify-content: center;

				view {
					background: #ffffff;
					width: 22upx;
					height: 22upx;
					border-radius: 50%;
				}
			}
		}
	}

	.p_bot {
		width: 670upx;
		margin: 20upx auto 8upx auto;
	}

	.flexs {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flexs1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexs2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexs3 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.btns {
		width: 690upx;
		height: 90upx;
		border-radius: 45upx;
		background: #3687f7;
		font-size: 30upx;
		color: #ffffff;
		text-align: center;
		line-height: 90upx;
	}

	.btns2 {
		width: 690upx;
		height: 80upx;
		border-radius: 8upx;
		background: #3687f7;
		color: #ffffff;
		text-align: center;
		line-height: 80upx;
	}

	.size24 {
		font-size: 24upx;
	}

	.size26 {
		font-size: 26upx;
	}

	.size30 {
		font-size: 30upx;
	}

	.size32 {
		font-size: 32upx;
	}

	.size20 {
		font-size: 20upx;
	}

	.text-gray {
		color: #999999;
	}

	.priceGay {
		view {
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}

		text {
			color: rgb(102, 102, 102);
			font-family: 思源黑体;
			font-size: 22rpx;
			font-weight: 400;
		}
	}

	.priceGreen {
		view {
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}

		text {
			color: rgb(93, 215, 72);
			;
			font-family: 思源黑体;
			font-size: 22rpx;
			font-weight: 400;
		}
	}

	.priceWhite {
		view {
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}
		
		text {
			color: #fff;
			;
			font-family: 思源黑体;
			font-size: 22rpx;
			font-weight: 400;
		}
	}

	.text-grey {
		color: #666666;
	}

	.text-blue {
		color: #3687f7;
	}

	.cuIcon-back {
		font-size: 40upx;
	}
</style>